// 获取到ul中li并绑定点击事件
$('ul>li').click(function () {
    $(this)
        .addClass('current')   // 给点击的li添加current
        .siblings()			   // 点击兄弟元素
        .removeClass('current')     // 清除current样式
        .parent()           // 找到父元素ul
        .next().next() 						// 找到下一个兄弟元素 ol
        .find('li')					// 找到ol中的子元素li
        .eq($(this).index()) // 找到ol中li中对应的索引元素
        .css({ 'display': 'block' }) // 显示
        .siblings()         // 找到兄弟元素
        .css({ 'display': 'none' })      // 隐藏

})

/* ********************************* html字符串拼接 ********************************************** */
function getdata(arr) {
    //转换数据格式，进行渲染
    //遍历数组元素
    let str = '';
    str += '<tr><th>商品名称1</th><th>商品类别</th><th>原价</th><th>现价</th><th>商品数量</th><th>库存</th><th>是否标红</th><th>删除</th></tr>';
    arr.forEach(ele => {
        str += '<tr id = "' + `${ele["id"]}` + '">';
        for (const key in ele) {
            if (key == 'id') {
                continue;
            }else if (key == 'oldprice') {
                str += `<td class="oldprice">${ele[key]}</td>`
                continue;
            }else if(key == 'colorblo'){
                str += `<td class="red">${ele[key]}</td>`
                continue;
            }
            str += `<td>${ele[key]}</td>`
        }
        str += '<td class="del">删除</td></tr>'
    });
    // console.log(str);
    return str;
}
/* ********************************* 渲染本地数据 ********************************************** */
function render() {
    //获取本地内存pddata,对表格进行渲染
    let pddata = JSON.parse(localStorage.getItem('pddata'));

    if (pddata) {
        //如果本地有数据，就进行渲染
        //循环遍历该数组的每一条数据
        let fruit = [];
        let food = [];
        let drink = [];
        let snacks = [];
        pddata.forEach(ele => {
            switch (ele.pdclass) {
                case '优选水果':
                    fruit.push(ele);
                    break;
                case '卤味熟食':
                    food.push(ele);
                    break;
                case '饮料酒水':
                    drink.push(ele);
                    break;
                case '休闲零食':
                    snacks.push(ele);
                    break;
            }
        });
        // console.log(fruit);
        $('.fruit tbody').html(getdata(fruit));
        $('.food tbody').html(getdata(food));
        $('.drink tbody').html(getdata(drink));
        $('.snacks tbody').html(getdata(snacks));
        //给原价添加删除线
        $('.oldprice').css({
            'text-decoration': 'line-through'
        });
        //清空输入框的内容
        $('input[type="text"]').val('');
        //因为重新渲染了一遍，所以要给删除重新再次绑定点击事件
        del();
        //渲染标红字体
        console.log($('.red').html());
        for (let i = 0; i < $('.red').length; i++) {
            if($('.red').eq(i).html() == 'true'){
                $('.red').eq(i).parent().find('td').eq(0).css({
                    'color':'red'
                });
            }
        }
    }
}

render();





/* ********************************* 添加本地数据 ********************************************** */
//每条商品数据的id
let id = JSON.parse(localStorage.getItem('id'));
if (!id) {
    //没有id，就加一个
    localStorage.setItem('id', '0')
}
//点击添加商品数据
$('#submit').click(function () {
    //检查信息是否为空
    let inputs = $('input[type="text"]');
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].value == '') {
            alert('请将信息填写完整');
            return;
        }
    }
    id++;
    //再将自增过的id存入本地内存
    localStorage.setItem('id', id)
    //获取输入框数据
    let pdname = $('#pdname').val();
    let pdclass = $('select[name="pdclass"]').val();
    let oldprice = $('#oldprice').val();
    let nowprice = $('#nowprice').val();
    let pdnum = $('#pdnum').val();
    let inventory = $('#inventory').val();
    let colorblo = $('input[name="red"]:checked').val()
    // console.log(pdname, pdclass, oldprice, nowprice, pdnum, inventory, colorblo);

    let data = { pdname, pdclass, oldprice, nowprice, pdnum, inventory, colorblo, id }
    // console.log(data);

    //获取本地内存
    let pddata = localStorage.getItem('pddata');
    if (pddata) {
        //有数据，就往里加;将pddata转换成数组或对象
        // console.log(JSON.parse(pddata));
        let dataarr = JSON.parse(pddata);
        dataarr.push(data);
        // console.log(dataarr);
        //将dataarr转换成json格式，放入本地内存
        localStorage.setItem('pddata', JSON.stringify(dataarr));
        render();
        // location.reload();
        // console.log(localStorage.getItem('pddata'));
    } else {
        //没有，创建新数组,将data放进数组，再将数据装换成json格式放进本地内存
        let arr = [];
        arr.push(data);
        localStorage.setItem('pddata', JSON.stringify(arr));
        render();
    }
})


/* ************************************ 删除本地数据 ******************************************* */
//给删除添加删除方法
function del() {
    // console.log($('.del'));
    $('.del').hover(function () {
        $(this).css({
            'cursor': 'pointer',
            'textDecoration': 'underline',
        });
    }, function () {
        $(this).css({
            'textDecoration': 'none',
        });
    });
    //点击删除
    $('.del').click(function () {
        // console.log($(this).parent().attr('id'));
        //获取当前点击的商品数据id
        let id = $(this).parent().attr('id');//string
        //获取本地内存的商品数据
        let arr = JSON.parse(localStorage.getItem('pddata'));
        //遍历每一条商品信息 找到对应id的商品信息
        for (let i = 0; i < arr.length; i++) {
            //数组下的每个对象的id属性  arr[i]['id']
            if (arr[i]['id'] == id) {
                //通过循环中的i(相当于arr的下标)，删除当前i(下标)的数据
                arr.splice(i, 1);
                //将改变过后的arr存入本地内存 pddata
                localStorage.setItem('pddata', JSON.stringify(arr));
                // location.reload();
                render();
                return;//结束循环
            }
        }
    });
}